<template>
<div class="data-map">
    <div id="map-view"></div>
    <div class="top-menu">
        <el-collapse>
            <el-collapse-item name="0">
                <div slot="title" style="padding:0px 2rem;">
                <span>多条件筛选</span>
                </div>
                <el-card class="collapseCard collapseCard1">
                    <div class="header" slot="header">区域选择</div>
                    <el-checkbox-group   v-model='elProperty.regionalScreeningCheckd'>
                        <el-checkbox  v-for="regional in elProperty.regionalScreeningGroup" :label="regional" :key="regional"></el-checkbox>
                    </el-checkbox-group>
                </el-card>
                <el-card class="collapseCard collapseCard2">
                    <div slot="header">企业标签</div>
                    <el-checkbox-group   v-model='elProperty.enterpriseTagCheckd'>
                        <el-checkbox v-for="enterprise in elProperty.enterpriseTag" :label="enterprise" :key="enterprise"></el-checkbox>
                    </el-checkbox-group>
                </el-card>
                <el-card class="collapseCard collapseCard3">
                    <div slot="header">行业分类</div>
                    <el-checkbox-group   v-model='elProperty.businessTagCheckd'>
                        <el-checkbox  v-for="business in elProperty.businessTag" :label="business" :key="business"></el-checkbox>
                    </el-checkbox-group>
                </el-card>
                <el-card class="collapseCard collapseCard4">
                    <div class="content">
                        <el-table 
                            :data="leftMenuTableData"
                            style="width: 100%"
                            :highlight-current-row="true"
                            @row-click="eventLeftMenuTableClick">
                            <el-table-column label="常用指标" prop="name"></el-table-column>
                            <el-table-column label="数值" prop="data">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <div class="button-box">
                    <el-button round type="primary" @click="eventFilter" icon="el-icon-search">查询</el-button>
                </div>
                
            </el-collapse-item>
        </el-collapse>

    </div>
    <div class="left-menu">
        <el-popover
            placement="right"
            width="300"
            trigger="click"
            v-model="elProperty.leftMenuPopoverVisible1">
            <div class="content">
                <el-table 
                    :data="leftMenuTableData"
                    style="width: 100%"
                    :highlight-current-row="true"
                    @row-click="eventLeftMenuTableClick">
                    <el-table-column label="常用指标" prop="name"></el-table-column>
                    <el-table-column label="数值" prop="data">
                         <el-button slot="header" style="float:right;padding:3px 0" type="text" @click="elProperty.leftMenuPopoverVisible1=false"><i class="el-icon-d-arrow-left"></i></el-button>
                    </el-table-column>
                </el-table>
            </div>
            <el-button circle slot="reference" icon="el-icon-star-off"></el-button>
        </el-popover>
        <el-popover
            placement="right"
            width="300"
            trigger="click"
            v-model="elProperty.leftMenuPopoverVisible2"
            @hide="eventLeftMenuRegionHide">
                <div class="title">
                    <span style="font-size:1rem;">区域筛选</span>
                    <el-button slot="header" style="float:right;padding:3px 0" type="text" @click="elProperty.leftMenuPopoverVisible2=false"><i class="el-icon-d-arrow-left"></i></el-button>
                </div>
                <div class="content" style="margin: 20px 0;text-align:center">
                    <el-checkbox-group  v-model='elProperty.regionalScreeningCheckd'>
                        <el-checkbox-button  v-for="regional in elProperty.regionalScreeningGroup" :label="regional" border :key="regional"></el-checkbox-button>
                    </el-checkbox-group>
                </div>

                <div style="text-align:center;">
                    <el-button type="primary" @click="eventFilter" size="small">确定</el-button>
                    <el-button size="small" @click="elProperty.regionalScreeningCheckd=[]">清空</el-button>
                </div>
            <el-button circle slot="reference" icon="el-icon-location-outline"></el-button>
        </el-popover>
        <el-popover
            placement="right"
            width="320"
            trigger="click"
            v-model="elProperty.leftMenuPopoverVisible3"
            @show="eventLeftMenuEnterpriseTagShow"
            @hide="eventLeftMenuEnterpriseTagHide"
            >
            <div class="title">
                <span style="font-size:1rem;">企业标签</span>
                <el-button slot="header" style="float:right;padding:3px 0" type="text" @click="elProperty.leftMenuPopoverVisible3=false"><i class="el-icon-d-arrow-left"></i></el-button>
            </div>
            <div class="content" style="margin: 20px 0;text-align:center">
                <el-checkbox-group  fill="#409EFF" v-model='elProperty.enterpriseTagCheckd'>
                    <el-checkbox style="margin:4px 0px 0px 0px;" v-for="enterprise in elProperty.enterpriseTag" :label="enterprise" border :key="enterprise"></el-checkbox>
                </el-checkbox-group>
            </div>

            <div style="text-align:center;">
                <el-button type="primary" size="small" @click="filterEnterpriseTag">确定</el-button>
                <el-button size="small" @click="elProperty.enterpriseTagCheckd=[]">清空</el-button>
            </div>
            <el-button circle slot="reference" icon="el-icon-view"></el-button>
        </el-popover>
        <el-popover
            placement="right"
            width="320"
            trigger="click"
            v-model="elProperty.leftMenuPopoverVisible4"
            @show="eventLeftMenuBusinessShow"
            @hide="eventLeftMenuBusinessHide"
            >
            <div class="title">
                <span style="font-size:1rem;">行业分类</span>
                <el-button slot="header" style="float:right;padding:3px 0" type="text" @click="elProperty.leftMenuPopoverVisible4=false"><i class="el-icon-d-arrow-left"></i></el-button>
            </div>
            <div class="content" style="margin: 20px 0;text-align:left">
                <el-checkbox-group  fill="#409EFF" v-model='elProperty.businessTagCheckd'>
                    <el-checkbox style="margin:4px 0px 0px 0px;" v-for="business in elProperty.businessTag" :label="business" border :key="business"></el-checkbox>
                </el-checkbox-group>
            </div>

            <div style="text-align:center;">
                <el-button type="primary" size="small" @click="filterBusiness">确定</el-button>
                <el-button size="small" @click="elProperty.businessTagCheckd=[]">清空</el-button>
            </div>
            <el-button circle slot="reference" icon="el-icon-document"></el-button>
        </el-popover>
    </div>
    <div class="right-menu">
        <el-button size="medium" @click="eventRightMenuHeatmap"><i class="el-icon-d-caret" ></i>热力地图</el-button>
        <el-button size="medium" title="开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制" @click="eventRightMenuMouseTool"><i class="el-icon-edit-outline" ></i>{{mouseToolText}}</el-button>
    </div>
    <div class="bottom-middle-menu">
        <div class="color-panel">
            <span class="title">颜色选择器</span>
            <div class="color"></div>
            <el-slider v-model="colorBase"
                :max="360"
                @change="eventColorSliderChange"
            ></el-slider>
        </div>
    </div>
    <div class="bottom-right-menu">
        <div class="location-info">
            <el-card>
                <div>{{clickLocation}}</div>
            </el-card>
        </div>

    </div>
    <div class="box">
        <div class="mouseToolResultBox"
            v-if="mouseToolResultBoxVisible">
            <el-card>
                <div slot="header">
                    <span>框选结果</span>
                    <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-close"
                        @click="eventMouseToolResultBoxClose"
                    ></el-button>
                </div>
                <el-table
                    style="width:100%"
                    max-height="480"
                    :data="mouseToolResultData"
                >
                    <el-table-column
                        prop="name"
                        label="企业名称"></el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址"></el-table-column>
                    <el-table-column
                        label="其他">
                        <template slot-scope="props">
                        <el-button type="text" @click="eventMouseToolResultDataLocBtn(props.row._id)"
                            icon="el-icon-location"></el-button>
                        <el-button type="text" @click="eventOpenDetail(props.row._id)">详情>></el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- <el-input v-model="uploadGovTag" class="uploadGov"></el-input>
                <el-button @click="uploadGov">提交</el-button> -->
            </el-card>
        </div>
    </div>
</div>
</template>


<script>
/* eslint-disable */
// import businessData from '../assets/新企业信息.js'
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import dedupe from 'dedupe'
var vueThis
const regionalScreening=['祖庙','石湾','张槎','南庄']
const enterpriseTag=['上市企业','三年内上市计划','国家创新型企业','省级创新型企业','火炬重点高新技术企业','高新区内企业','经孵化器孵化','无标签']
const enterpriseTagKey={
    '上市企业':'是否为上市企业',
    '三年内上市计划':'近3年是否有上市计划',
    '国家创新型企业':'是否为国家创新型企业',
    '省级创新型企业':'是否为省级创新型企业',
    '火炬重点高新技术企业':'是否为火炬重点高新技术企业',
    '高新区内企业':'是否为高新区内企业',
    '经孵化器孵化':'是否经孵化器孵化',
    '无标签':'无标签'
    }
const businessTag=['电力、热力、燃气及水的生产和供应业','科学研究和技术服务业','信息传输、软件和信息技术服务业','文化、体育和娱乐业','金融业','农、林、牧、渔业','制造业','水利、环境和公共设施管理','批发和零售业','居民服务、修理和其它服务业','建筑业','交通运输、仓储和邮政业','租赁和商务服务业']
let heatMap
var heatMapData={}
let heatMapDataFull={}
let markerList={}
let markerListFull={}
let enterpriseCache=new Map()
let colorArr
let mouseTool
export default {
    created(){
        this.initData()
        this.$root.eventHub.$on('queryEnterpirse',this.queryEnterpirse)
        vueThis=this
    },
    mounted() {
        this.initMap()
    },
    data(){
        return{
            uploadGovTag:'',
            map:null,
            loadSuccess:false,
            isHeatmap:true,
            center:[113.072343,22.992738],
            zoom:13,
            colorBase:0,
            businessTagState:{},
            enterpriseTagState:{},
            mouseToolEditState:false,
            mouseToolResultBoxVisible:false,
            mouseToolResultData:[],
            elProperty:{
                leftMenuPopoverVisible1:false,
                leftMenuPopoverVisible2:false,
                leftMenuPopoverVisible3:false,
                leftMenuPopoverVisible4:false,
                checkBoxBackColor:'#409EFF',
                regionalScreeningCheckd:[],
                regionalScreeningCheckdBacked:[],
                regionalScreeningGroup:regionalScreening,
                enterpriseTagCheckd:[],
                enterpriseTagCheckdBacked:[],
                enterpriseTag:enterpriseTag,
                businessTagCheckd:[],
                businessTagCheckdBacked:[],
                businessTag:businessTag
            },
            //左边菜单的常用指标条目
            leftMenuTableData:[],
            clickLocation:'',
            cirlceShowLock:false
        }
    },
    watch:{
        enterpriseBaseInfo(newVal,oldVal){
            if(newVal.length!==0){
                this.initEnterpisePoint(this.map,newVal)
                this.eventLeftMenuTableClick({name:'注册资本'})
            }
        },
        isHeatmap(newVal){
            if(!this.loadSuccess){
                return
            }
            this.refreshShow(newVal)
        },
        businessTagState(newVal){
            // for(let _id in newVal){
            //     delete markerList[_id]
            // }

            // console.log(markerList)
            this.filterMethod(newVal)
        },
        enterpriseTagState(newVal){
            this.filterMethod(newVal)
        }
    },
    computed:{
        enterpriseBaseInfo:{
            get:function(){
                return this.$store.state.enterpriseBaseInfo
            },
            set:function(){}
        },
        enterpriseTagQuery(){
            let arr=[]
            for(let tag of this.elProperty.enterpriseTagCheckd){
                arr.push(enterpriseTagKey[tag])
            }
            return arr
        },
        mouseToolText(){
            return this.mouseToolEditState?'清除框选':'框选范围'
        }
    },
    methods:{
        /////////////////////////////////////////
        uploadGov(){
            console.log(this.mouseToolResultData)
            let arr=[]
            for(let obj of this.mouseToolResultData){
                arr.push(obj.name)
            }
            let postData={
                'gov':this.uploadGovTag,
                "data":arr
            }
            this.$axios.post('/enterprise/uploadGov',postData).then(response=>{
                let body=response.data
                console.log(body)
            })
        },
        /////////////////////////////////////////
        initData(){
            //接口获取统计数据
            this.$axios.get('/enterprise/statistical').then(response=>{
                let body=response.data
                let leftMenuTableData=[]
                for(let key in body){
                    leftMenuTableData.push({
                        name:key,
                        data:body[key]
                    })
                }
                this.leftMenuTableData=leftMenuTableData
            })
            this.elProperty.regionalScreeningCheckd=regionalScreening.slice()
            this.elProperty.businessTagCheckd=businessTag.slice()
            this.elProperty.enterpriseTagCheckd=enterpriseTag.slice()
        },
        initMap(){
            let map=this.map
            lazyAMapApiLoaderInstance.load().then(()=>{
                map = new AMap.Map('map-view', {
                    center: this.center,
                    zoom:this.zoom,
                    mapStyle:'amap://styles/blue'
                })
                this.map=map
                this.showDistrict(map)
                map.plugin(['AMap.Heatmap'],function(){
                    heatMap=new AMap.Heatmap(map,{
                        radius:25,
                        opacity:[0,0.8]
                    })
                })
                if(this.enterpriseBaseInfo.length!==0){
                    this.initEnterpisePoint(this.map,this.enterpriseBaseInfo)
                    this.eventLeftMenuTableClick({name:'注册资本'})
                }
                //鼠标绘制插件
                map.plugin(['AMap.MouseTool'],()=>{
                    mouseTool=new AMap.MouseTool(map)
                    mouseTool.on('draw',this.eventMouseToolComplete)
                })
                this.loadSuccess=true
            })

        },
        //初始化点标记
        initEnterpisePoint(map,infoList){
            infoList=Object.values(infoList)
            if(infoList.length===0) return
            // let r=parseInt(Math.random()*255)
            // let g=parseInt(Math.random()*255)
            // let b=parseInt(Math.random()*255)
            for(let info of infoList){
                let marker=new AMap.CircleMarker({
                    center:[info.谷歌经度,info.谷歌纬度],
                    strokeColor:'white',
                    strokeWeight:1.5,
                    fillColor:`hsla(0,100%,50%,1)`,
                    fillOpacity:1,
                    radius:6,
                    bubble:true,
                    cursor:'pointer',
                    zIndex:99,
                    title:'info.name'
                })
                marker.setExtData({_id:info._id})
                //点击事件
                let _this=this
                marker.on('click',function(e){
                    _this.clickLocation=e.lnglat.getLng() + ',' + e.lnglat.getLat()
                    _this.showCircleDetail(info._id)
                })
                // marker.on('mouseover',(e)=>{
                //     _this.showCircleBase(info._id)
                // })
                markerList[info._id]=marker
            }
            for(let marker in markerList){
                markerList[marker].setMap(map)
            }
            Object.assign(markerListFull,markerList)
            this.filterBusiness()
            this.isHeatmap=false
        },
        eventReLocation(){
            this.map.setCenter(this.center)
            this.map.setZoom(this.zoom)
        },
        eventLeftMenuTableClick(row){
            this.$axios.get('/enterprise/heatmapInfo',{
                params:{statistical:row.name}
            }).then(response=>{
                let body=response.data
                if(Object.getOwnPropertyNames(heatMapData).length!==0){
                    for(let key in body){
                        if(heatMapData[key]===undefined){
                            delete body[key]
                        }
                    }
                }
                heatMapData=Object.assign({},body)
                this.showHeatmap(heatMapData,row.name)
                this.showEnterprisePoint(this.map,body,row.name)
                Object.assign(heatMapDataFull,heatMapData)
            })
        },
        //地区事件
        eventLeftMenuRegionHide(){
            this.elProperty.regionalScreeningCheckd=this.elProperty.regionalScreeningCheckdBacked.slice()
        },
        //行业标签事件
        eventLeftMenuBusinessShow(){
            // let arr=dedupe(Object.values(this.businessTagState),value=>value['行业类别'])
            // this.elProperty.enterpriseTagCheckd=[]
            // for(let obj of arr){
            //     this.elProperty.enterpriseTagCheckd.push(obj['行业类别'])
            // }
            // this.elProperty.enterpriseTagCheckdBacked=this.elProperty.enterpriseTagCheckd.slice()
        },
        eventLeftMenuBusinessHide(){
            this.elProperty.businessTagCheckd=this.elProperty.businessTagCheckdBacked.slice()
        },
        //企业标签事件
        eventLeftMenuEnterpriseTagShow(){
            // let arr=dedupe(Object.values(this.businessTagState),value=>value['行业类别'])
            // this.elProperty.enterpriseTagCheckd=[]
            // for(let obj of arr){
            //     this.elProperty.enterpriseTagCheckd.push(obj['行业类别'])
            // }
            // this.elProperty.enterpriseTagCheckdBacked=this.elProperty.enterpriseTagCheckd.slice()
        },
        eventLeftMenuEnterpriseTagHide(){
            this.elProperty.enterpriseTagCheckd=this.elProperty.enterpriseTagCheckdBacked.slice()
        },
        eventRightMenuHeatmap(){
            this.isHeatmap=this.isHeatmap?false:true
        },
        eventColorSliderChange(h){
            for(let index in markerList){
                markerList[index].setOptions({
                    fillColor:`hsla(${h},100%,${100-colorArr[index]}%,1)`,
                })
            }
        },
        eventRightMenuMouseTool(){
            this.mouseToolEditState?(()=>{
                mouseTool.close(true)
                this.mouseToolEditState=false
            })():(()=>{
                mouseTool.polygon()
                this.mouseToolEditState=true
            })()
        },
        eventMouseToolComplete(drawObj){
            let obj=drawObj.obj
            let inRounds=[]
            for(let marker in markerList){
                let point=markerList[marker].getCenter()
                let isPointIn=AMap.GeometryUtil.isPointInRing(point,obj.getPath())
                if(isPointIn){
                    inRounds.push(marker)
                }
            }
            let result=[]
            for(let _id of inRounds){
                result.push({
                    name:this.enterpriseBaseInfo[_id]['name'],
                    address:this.enterpriseBaseInfo[_id]['关键词'],
                    position:`${this.enterpriseBaseInfo[_id]['谷歌经度']},${this.enterpriseBaseInfo[_id]['谷歌纬度']}`,
                    _id:_id
                })
            }
            this.mouseToolResultBoxVisible=true
            this.mouseToolResultData=result
        },
        eventMouseToolResultBoxClose(){
            mouseTool.close(true)
            this.mouseToolEditState=false
            this.mouseToolResultBoxVisible=false
        },
        eventMouseToolResultDataLocBtn(_id){
            this.eventMouseToolResultBoxClose()
            this.queryEnterpirse(_id)
        },
        //根据各个多选框的结果进行综合筛选
        eventFilter(){
            //下面是多次条件筛选
            //地域筛选
            let query={
                gov:this.elProperty.regionalScreeningCheckd,
                business:this.elProperty.businessTagCheckd,
                enterpriseTag:this.enterpriseTagQuery
            }
            this.$axios.post('/enterprise/queryByMultiple',query).then(response=>{
                let result=response.data
                // console.log(result)
                this.elProperty.businessTagCheckdBacked=this.elProperty.businessTagCheckd.slice()
                this.elProperty.leftMenuPopoverVisible4=false
                this.elProperty.enterpriseTagCheckdBacked=this.elProperty.enterpriseTagCheckd.slice()
                this.elProperty.leftMenuPopoverVisible3=false
                this.elProperty.regionalScreeningCheckdBacked=this.elProperty.regionalScreeningCheckd.slice()
                this.elProperty.leftMenuPopoverVisible2=false
                this.filterMethod(result)
            })

        },
        //根据ID打开详情
        async eventOpenDetail(_id){
            const h=this.$createElement
            const detail=await this.getEnterpriseDeatil(_id)
            let content=[]
            for(let key in detail){
                content.push(h('p', null, [
                    h('span', null, `${key}：`),
                    h('span', { style: 'color: teal' }, `${detail[key]}`)
                ]))
            }
            this.$msgbox({
            title: '详情',
            message: h('div', {style:'height:400px;overflow:auto;overflow-x:hidden;'},content),
            showCancelButton: false,
            confirmButtonText: '确定'
            })
        },
        //显示热力图
        showHeatmap(heatmapData,name){
            let map=this.map
            let heatmapArr=Object.values(heatmapData)
            for(let i=0;i<heatmapArr.length;i++){
                let obj=heatmapArr[i]
                obj.count=Math.log(obj.count?obj.count:1)
            }
            heatMap.setDataSet({
                data:heatmapArr,
                max:heatmapArr[0].count
            })
        },
        //绘制行政区域
        showDistrict(map){
            let opts={
                subdistrict:0,
                extensions:'all',
                level:'district'
            }
            let district=new AMap.DistrictSearch(opts)
            //绘制禅城区
            district.search('禅城区',(status,result)=>{
                let polygons=[]
                let bounds=result.districtList[0].boundaries
                if(bounds){
                    for(let i=0,l=bounds.length;i<l;i++){
                        let polygon=new AMap.Polygon({
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.05,
                            fillColor: '#fff',
                            strokeColor: '#FFCC33',
                            zIndex:0
                        })
                        polygons.push(polygon)
                        // polygon.on('click',(e)=>{
                        //     this.clickLocation=e.lnglat.getLng() + ',' + e.lnglat.getLat()
                        // })

                    }
                }
                if(map){
                    map.add(polygons)
                }
            })
            //绘制禅城区下各个街道地图
            let paths=[]
            let path1=[
                [113.029058,23.026232],
                [113.051546,23.00189],
                [113.059957,22.999678],
                [113.066593,23.00293],
                [113.074977,23.003944],
                [113.076952,23.001811],
                [113.08193,22.990592],
                [113.087197,22.982993],
                [113.095663,22.977159]
            ]
            let path2=[
                [113.077172,23.001348],
                [113.082896,23.005984],
                [113.087357,23.011682],
                [113.144351,23.011901]
            ]
            let path3=[
                [113.075868,23.049998],
                [113.088088,23.045229],
                [113.101747,23.043664],
                [113.101978,23.03151],
                [113.102214,23.011743]
            ]
            paths.push(path1,path2,path3)
            for(let path of paths){
                let polyline=new AMap.Polyline({
                    path:path,
                    strokeStyle: "dashed",
                    strokeWeight: 1,
                    strokeColor:'#FFCC33'
                })
                polyline.setMap(map)
            }
        },
        //地图山的点全显示，对应税收等数值的变化

        showEnterprisePoint(map,infoMaps,name){
            let h=this.colorBase
            // let s=parseInt(Math.random()*100)
            colorArr={}
            let infoList=Object.values(infoMaps).sort((a,b)=>b.count-a.count)
            for(let index in markerList){
                let marker=markerList[index]
                let info=infoMaps[marker.getExtData()._id]
                if(!info.count){
                    info.count=1
                }
                let l=Math.log(info.count)/Math.log(infoList[0].count)*70+10
                colorArr[index]=l;
                try{
                    markerList[index].setOptions({
                        fillColor:`hsla(${h},100%,${100-l}%,1)`,
                    })
                }catch(err){}

            }
            // console.log(lArr)
        },
        //加载企业详情(带缓存)
        async getEnterpriseDeatil(_id){
            return new Promise((resolve,reject)=>{
                if(enterpriseCache.has(_id)){
                    resolve(enterpriseCache.get(_id))
                }else{
                    this.$axios.get('/enterprise/singleEnterpriseByID',{
                        params:{_id:_id}
                    }).then(response=>{
                        let body=response.data
                        enterpriseCache.set(_id,body)
                        resolve(body)
                    })
                }
            })
        },
        //显示简要
        async showCircleBase(_id){
            if(this.cirlceShowLock) return  
            let info=this.enterpriseBaseInfo[_id]
            let content=[
                `${info['name']}`
            ]
            let infoWindow=new AMap.InfoWindow({
                content:content.join("<br>")
            })
            infoWindow.open(this.map,[info['谷歌经度'],info['谷歌纬度']])
        },
        //显示详情
        async showCircleDetail(_id){
            let detail=await this.getEnterpriseDeatil(_id)
            console.log(detail)
            let content=[
                `<b>${detail['name']}</b>`,
                `<span style="font-size:0.8rem">行业类别：${detail['行业类别']}</span>`,
                `<span style="font-size:0.8rem">企业类别：${detail['企业类别']}</span>`,
                `<span style="font-size:0.8rem">注册资本：${detail['注册资本']}</span>`,
                `<span style="font-size:0.8rem">地址：${detail['关键词']}</span>`,
                // `<a class="contentDetailClick" onClick="vueThis.eventOpenDetail('${_id}')">详情>></a>`
                //`<a class="contentDetailClick" onClick="console.log(heatMapData)">详情>></a>`
            ]
            let infoWindow=new AMap.InfoWindow({
                content:content.join("<br>")
            })
            // infoWindow.getContent().on('click','contentDetailClick',e=>this.eventOpenDetail(_id))
            infoWindow.on('open',(e)=>this.cirlceShowLock=true)
            infoWindow.on('close',(e)=>this.cirlceShowLock=false)
            infoWindow.open(this.map,[detail['谷歌经度'],detail['谷歌纬度']])
        },
        refreshShow(newVal){
            newVal?heatMap.show():heatMap.hide()
            newVal?(()=>{
                for(let marker in markerList){
                    markerList[marker].hide()
                }
            })():(()=>{
                for(let marker in markerList){
                    markerList[marker].show()
                }
            })()
        },
        //调用后定位到地图中对应ID的圆点坐标
        queryEnterpirse(_id){
            let info=this.enterpriseBaseInfo[_id]
            if(info._id===_id){
                this.map.setZoom(19)
                this.map.setCenter([info.谷歌经度,info.谷歌纬度])
                this.showCircleDetail(_id)
            }
        },
        //根据行业进行行业筛选
        filterBusiness(){
            this.eventFilter()

        },
        //根据企业标签进行筛选
        filterEnterpriseTag(){
            this.eventFilter()
        },
        filterMethod(newVal){
            Object.assign(markerList,markerListFull)
            if(heatMapDataFull){
                Object.assign(heatMapData,heatMapDataFull)
            }
            
            for(let key in heatMapData){
                if(newVal[key]===undefined){
                    delete heatMapData[key]
                }
            }
            if(Object.getOwnPropertyNames(heatMapData).length!==0){
                this.showHeatmap(heatMapData)
            }
            for(let marker in markerList){
                markerList[marker].hide()
            }
            if(!this.isHeatmap){
                for(let marker in markerList){
                    if(newVal[marker]===undefined){
                        delete markerList[marker]
                    }else{
                        markerList[marker].show()
                    }
                    
                }
            }
            this.eventColorSliderChange(this.colorBase)
        }
        
    }
}
</script>

<style lang="less" scoped>
.data-map{
    height: 100%;
    #map-view{
        width: 100%;
        height: 100%;
    }
}
.top-menu{
    position: absolute;
    top: 60px;
    width: 100%;
    box-sizing: border-box;
    z-index: 8;
    .collapseCard{
        display: inline-block;
        margin-left: 20px;
        height: 240px;
        .el-checkbox{
            display: block;
        }
        overflow: auto;
        overflow-x: hidden;
    }
    .collapseCard1{
        width: 180px;
    }
    .collapseCard2{
        width: 300px;
    }
    .collapseCard3{
        width: 400px;
    }
    .collapseCard4{
        width: 700px;
    }
    .button-box{
        display: inline-block;
        margin-left: 20px;
        height: 240px;
        overflow: auto;
        overflow-x: hidden;
        text-align: center;
        width: 200px;
    }
}
.left-menu{
    position: absolute;
    top: 120px;
    left: 30px;
    display: flex;
    flex-direction: column;
    .el-button{
        margin: 10px 0;
        opacity: 1;
    }
}
.right-menu{
    position: absolute;
    top: 120px;
    right: 30px;
    display: flex;
    flex-direction: column;
    .el-button{
        margin: 10px 0;
        opacity: 1;
    }
}
.el-collapse-item-children-item{
    width: 100%;
}
.bottom-right-menu{
    position: absolute;
    bottom: 10px;
    right: 16px;
    opacity: 0.7;
}
.bottom-middle-menu{
    position: absolute;left: 50%;bottom: 10px;
    transform: translate(-50%,0%);
    width: 400px;
    background: white;
    border-radius: 10px;
    text-align: center;
    .color-panel{
        .title{
            line-height: 2rem;
        }
        .color{
            height: 16px;
            margin: 2px 0px 0px 0px;
            width: 100%;
            background: linear-gradient(to right,
             hsl(0,100%,50%) ,
             hsl(30,100%,50%),
             hsl(60,100%,50%),
             hsl(90,100%,50%),
             hsl(120,100%,50%),
             hsl(150,100%,50%),
             hsl(180,100%,50%),
             hsl(210,100%,50%),
             hsl(240,100%,50%),
             hsl(270,100%,50%),
             hsl(300,100%,50%),
             hsl(330,100%,50%),
             hsl(360,100%,50%),
             ); 
        }
    }
}
.mouseToolResultBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 800px;
}
</style>
